<template>
  <div v-loading="load">
    <el-row>
      <el-card>
        <div slot="header" class="clearfix text-left">
          <el-col :span="23">
            <span class="title-icon">客户查询</span>
          </el-col>

        </div>
        <el-row style="margin-top: 2px">
          <el-col :span="2">
              <span style="font-size: 15px; margin-left: 50px;margin-right: 10px; color: #1c6ca1">
                客户全称:
              </span>
          </el-col>
          <el-col :span="7">
            <el-input
              v-model.trim="customerFullName"
              placeholder="请输入客户全称"
              @keyup.enter.native="searchCustomer"
              clearable
              size="mini"
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-col>
          <el-col :span="2" style="margin-left: 60px;">
            <el-button size="mini" type="primary" @click="searchCustomer"
            >立即查询
            </el-button
            >
          </el-col>
        </el-row>

        <div model="result_id" v-if="showBoxResult">
          <el-row>
            <el-col :span="23" style="font-size: 15px; margin-top: 40px;margin-bottom: 20px; ">
              <span>查询结果(最多展示6条):</span>
            </el-col>
            <el-col :span="24">
              <el-table
                :data="customerData"
                style="width: 100%"
                size="mini"
                header-row-class-name="center"
                border
              >
                <ex-table-column
                  type="index"
                  label="序号"
                  :auto-fit="true"
                  :fit-header="true"
                >
                </ex-table-column>
                <ex-table-column
                  property="customerNameShort"
                  label="客户简称"
                  :auto-fit="true"
                  :fit-header="true"
                  width="200"
                >
                </ex-table-column>
                <ex-table-column
                  property="customerFullName"
                  label="客户全称"
                  :auto-fit="true"
                  :fit-header="true"
                >
                </ex-table-column>
                <ex-table-column
                  property="customerType"
                  label="客户类型"
                  :auto-fit="true"
                  :fit-header="true"
                >
                  <template slot-scope="scope">
                    {{ customerTypeMap[scope.row.customerType] }}
                  </template>
                </ex-table-column>
                <ex-table-column
                  property="salesman"
                  label="客户销售"
                  :auto-fit="true"
                  :fit-header="true"
                >
                  <template slot-scope="scope">
                    {{ userMap[scope.row.salesman] }}
                    {{ scope.row.saleDepart }}
                  </template>
                </ex-table-column>
                <ex-table-column
                  property="customerService"
                  label="客户客服"
                  :auto-fit="true"
                  :fit-header="true"
                >
                  <template slot-scope="scope">
                    {{ userMap[scope.row.customerService] }}
                    {{ scope.row.serviceDepart }}
                  </template>
                </ex-table-column>
                <!--<ex-table-column
                  property="enterpriseCreditCode"
                  label="企业信用代码"
                  :auto-fit="true"
                  :fit-header="true"
                >
                </ex-table-column>-->
                <ex-table-column
                  label="操作"
                  width="150"
                  :auto-fit="true"
                  :fit-header="true"
                >
                  <template slot-scope="scope">
                    <!--<el-button
                      size="mini"
                      type="danger"
                      class=""
                      @click="copyCurrent(scope.row.id)"
                      :data-clipboard-text="scope.row.customerNameShort"
                      slot="reference"
                    >复制
                    </el-button>-->
                    <i
                      class="el-icon-copy-document tag-read"
                      :data-clipboard-text="scope.row.customerNameShort"
                      @click="copyCurrent(scope.row.id)"
                    >复制</i>
                    <el-button v-if="scope.row.customerType === 40 "
                               size="mini"
                               type="danger"
                               @click="
                        adpotCusotmer(scope.row.id, scope.row, scope.$index)
                      "
                    >认领客户
                    </el-button>
                  </template>
                </ex-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </el-row>
    <template>
      <div>
        <el-dialog
          title="请填写申请原因"
          :visible.sync="applyDialog"
          style="width:50%;text-align:center;margin:0 auto"
        >
          <el-form>
          <el-form-item prop="crateDate" label="申请原因">
            <el-input
              v-model="form.reason"
              placeholder="请输入申请原因"
              clearable
              size="mini"
              :style="{ width: '80%' }"
            >
            </el-input>
          </el-form-item>
          </el-form>
          <div slot="footer">
            <el-button size="mini" @click="applyDialog = false">取消</el-button>
            <el-button size="mini" type="primary" @click="claimCustomer()"
            >确定
            </el-button
            >
          </div>
        </el-dialog>
      </div>
    </template>
  </div>
</template>
<script>
import {ajax} from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";
import Clipboard from "clipboard";

export default {
  components: {},
  props: [],
  data() {
    return {
      applyDialog: false,
      load: false,
      customerData: [],
      showBoxResult: true,
      customerFullName: '',
      customerTypeMap: {},
      userMap: {},
      userDepartMap: {},
      form: {}
    };
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    searchCustomer() {
      ajax("initCustomerSearch", {customerFullName: this.customerFullName}).then(
        res => {
          console.log(res);
          if (res.code != 200) {
            this.$message.error("请求失败:" + res.message);
          } else {
            this.$message.success("请求成功");
            var data = res.data;
            this.customerData = data.data;
            this.customerTypeMap = data.customerTypeMap;
            this.userMap = data.userMap;
            this.userDepartMap = data.userDepartMap;
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    copyCurrent() {
      var clipboard = new Clipboard(".tag-read");
      clipboard.on("success", e => {
        this.$message.success("复制成功");
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", e => {
        // 不支持复制
        this.$message.error("该浏览器不支持自动复制");
        // 释放内存
        clipboard.destroy();
      });
    },
    adpotCusotmer(id) {
      this.form.id=id;
      this.applyDialog = true;
    },
    async claimCustomer(){
      console.log(this.form)
      if(this.form.reason==null){
        this.$message.error("申请原因不能为空");
        return;
      }
      const attrs = {
        class: "com.tofba.app.client.customer.CustomerInfoClient"
      };
      await ajax("claimCustomer", this.form, attrs).then(
        res => {
          if (res.code === 200) {
            this.applyDialog=false;
            this.$message.success("操作成功");
          }
        });
    }
  }
};
</script>
<style></style>
